<template>
	<view class="l_waterfall">
		<view>
			<view class="water_col" ref="water_col" v-for="(item,index) in group" :key="index" :id="`water_col_box_${index}`"
				:style="{'width':w,'marginLeft':mar}">
				<view class="water_col_block" v-for="(ite,ind) in optimize['column_'+index]" :key="ind" @click="gogoodsdetail(ite.ID)">
					<image :src="ite.img" mode="widthFix" @load="emitHeight(ite,ind)" @error="emitHeight(ite,ind)">
					</image>
					<view class=" textsl2" style="height: 42px;font-size: 14px;font-weight: 700;padding: 0 6px;">
						{{ite.name}}
					</view>
					<view class="price">
						<view class="price1">
							￥<text>{{$toFiexd(ite.price,2)}}</text>
						</view>
						<view class="price2">
							{{ite.sales+ite.virtually_sales}}人付款
						</view>
					</view>
<!-- 					<view class="d" >
						<image :src="ite.business.shop_head" mode=""></image>

						<text class="textsl1">{{ite.business.name}}</text>
					</view> -->
				</view>
			</view>
		</view>
		<empty v-if="!optimize['column_0'].length"></empty>
	</view>
</template>

<script>
	export default {
		name: "lj-waterfall",
		props: {
			group: {
				type: Number,
				default: 2,
			},
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			pageSize: {
				type: Number,
				default: 10,
			}
		},
		watch: {
			group: {
				handler(newVal, oldVal) {
					this.handleFun()
					setTimeout(() => {
						this.init(0)
					}, 10)
				},
				immediate: true //初始化绑定时就会执行handler方法
			},
			list: {
				handler(newVal, oldVal) {
					setTimeout(() => {
						let num = newVal.length/this.pageSize
						// console.log(newVal.length/this.pageSize,this.pageSize*num)
						this.init(this.pageSize*num)
						// this.init(newVal.length - this.pageSize)
						// 数组push的时候判断有一点问题，应该从上一次结束
					}, 10)
				},
				immediate: true //初始化绑定时就会执行handler方法
			}
		},
		data() {
			return {
				widthGroup: {
					2: 360,
					3: 360,
					4: 180,
					5: 140,
				},
				optimize: {
					list: {},
					proportion: 1,
				},
				temporaryArr: [],
				bool: false,
				lists: [

				]
			};
		},
		computed: {
			w() {
				const boxW = `${100 / this.group - this.optimize.proportion}%`
				return boxW
			},
			mar() {
				const c = `${(this.optimize.proportion*this.group/(this.group+1))}`;
				const m = `${(parseInt(c*1000)/1000).toFixed(3)}%`
				return m;
			}
		},
		methods: {
			gogoodsdetail(id){
				uni.navigateTo({
					url:'/subPackages/commodity/details?id='+id
				})
			},
			emitHeight(ite, ind) {
				this.init(ite.index + 1)
				// console.log(ite.index)
			},
			async init(index) {
				if (index >= this.list.length) return false;
				const boxHeight = await this.getBoxHeight();
				this.processingFun(boxHeight, index)
			},
			processingFun(boxHeight, index) {
				this.optimize[`column_${boxHeight.column}`].push({
					...this.list[index],
					index,
				})
				uni.createSelectorQuery().select('#water_col').boundingClientRect(rect => {

				      }).exec()
				this.$forceUpdate()
			},
			async getBoxHeight() {
				return new Promise(resolve => {
					const heightArr = [];
					for (let i = 0; i < this.group; i++) {
						const query = uni.createSelectorQuery().in(this);
						query.select(`#water_col_box_${i}`).boundingClientRect(data => {
							heightArr.push({
								column: i,
								height: data.height
							});
						}).exec(() => {
							if (this.group <= heightArr.length) {
								resolve(this.compareHeight(heightArr, 'height'));
							}
						});
					}
				})
			},
			compareHeight(arr, s) {
				let oh = arr[0][s]
				let mo = []
				for (let i = arr.length - 1; i >= 0; i--) {
					if (arr[i][s] <= oh) {
						oh = arr[i][s]
					}
				}
				mo = arr.filter(i => i[s] == oh);
				return mo[0]
			},
			handleFun() {
				for (let i = 0; i < this.group; i++) {
					this.optimize[`column_${i}`] = []
				}
			}
		},
		mounted() {
			this.handleFun()
			console.log('11111c')
		}
	}
</script>

<style lang="scss" scoped>
	.l_waterfall {
		position: relative;

		.water_col {
			float: left;
		}
	}

	.water_col_block {
		margin: 0 10upx;
		margin-bottom: 10rpx;
		border-radius: 20upx;
		padding-bottom: 10upx;
		margin-bottom: 20upx;
		overflow: hidden;
		box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
		.t {
			font-size: 28rpx;
			font-weight: bold;
			color: #3D444D;
			width: 90%;
			padding:0 5%;
			margin: 5% 0;
		}
		.price{
			padding:0 5%;
			color: #FF4E00;
			font-size: 32upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price2{
				color: #999;
				font-size: 20upx;
			}
		}
		.d {
			width: 92%;
			font-size: 27rpx;
			color: #797979;
			padding: 4%;
			display: flex;
			align-items: center;
			image{
				width: 40upx;
				height: 40upx;
				border-radius: 50%;
				margin-right: 10upx;
			}
		}

		image {
			display: block;
			width: 100%;
			border-radius: 6rpx;
		}
	}
</style>
